<template>
	<view class="container bg-white login-container margin-auto">
		<view class="padding text-center padding-top-xll">
			<view class="margin-top-xl" >
				<image class="logo-img" src="https://files.virtualframerapp.com/web-app/static/logo.png?v=a263fds"></image>
			</view>
		</view>
		<view class="wrapper padding-xl">
			<view class="login-input">
				<view class="cu-form-group bg-gray">
					<input type="text" placeholder="账号" @input="accountWrite"  v-model="loginForm.userName"></input>
				</view>
				<view class="cu-form-group margin-top-xl bg-gray">
					<input type="password" placeholder="密码" @input="accountWrite" @confirm="loginSubmit"  v-model="loginForm.pwd"></input>
				</view>
			</view>
			<view class="padding-lr padding-top text-left" >
				<view class="text-gray text-sm padding-left-xll">使用装裱服务商提供的用户名和密码登录。</view>
			</view>
			<view class="login-group margin-top-xll" @click="loginSubmit">
				<button class='login-btn text-right padding-right-xxl btn-sm bg-gray radius text-xxxl' :class="canLogin?'text-black':'text-gray-disable'">登录</button>
			</view>
		</view>
		<view  class="text-center no-shadow-foot bg-white" >
			<view class="text-gray-bold move-cur" @click="toAbout">
				关于XXX
			</view>
		</view>
	</view>
</template>
<script>
	import { isDefine, isDefineZero} from '@/utils/index'
	import { handleGetUserInfo } from "@/utils"
	import { login } from "@/api/user"
	import { mapMutations, mapState } from 'vuex'
	export default{
		data(){
			return {
				canLogin:false,
				logining: false,
				loginForm:{
					userName:"",
					pwd:"",
				},
			}
		},
		onLoad(){

		},
		computed: {
			...mapState(['hasLogin'])
		},
		methods: {
			...mapMutations(['login']),
			accountWrite(e){
				if(isDefine(this.loginForm.userName) && isDefineZero(this.loginForm.pwd)){
					this.canLogin = true
				} else {
					this.canLogin = false
				}
			},
			async loginSubmit(){
				let that=this;
				if(!isDefine(this.loginForm.userName)){
					return;
				}
				if(this.loginForm.pwd.length<1){
					return;
				}
				uni.showLoading({
				    title: '正在登录...'
				});
				login(this.loginForm).then(({ data }) => {
					uni.setStorageSync('nansha_token', data.token)
					handleGetUserInfo(data)
					uni.hideLoading()
				}).catch(err => {
					uni.hideLoading()
				});
			}
		}

	}
</script>

<style lang='scss'>
	.login-container{
		width:800upx;
		max-width: 100%;
	}
	.login-input{
		padding-left:130upx;
	}
	.logo-img{
		width:700upx;
		height:560upx;
	}
	.btn-sm{
		height:50upx;
		line-height: 50upx;
	}
</style>
